<template>
  <div class="chart-gauge-setting">
    <el-form ref="chartGaugeSetting"
             :model="setting"
             label-position="top"
             style="height:auto;">
      <el-form-item :label="$t('custom.component.gadget.gauge.valueFieldsName')">
        <el-select v-model="setting.valueFieldsName"
                   style="width:80%;">
          <el-option v-for="(item,index) in fieldsList"
                     :key="index"
                     :label="item.name"
                     :value="item.name"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.gauge.suffix')">
        <el-input v-model="setting.suffix"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.setXAxisFontSize')">
        <el-input v-model="setting.xAxisFontSize"
                  :placeholder="$t('custom.component.gadget.setXAxisFontSizePlaceholder')"
                  style="width:80%;"></el-input>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.gauge.minimum')">
        <el-input-number v-model="setting.minimum"
                         style="width:80%;"></el-input-number>
      </el-form-item>
      <el-form-item :label="$t('custom.component.gadget.gauge.maximum')">
        <el-input-number v-model="setting.maximum"
                         style="width:80%;"></el-input-number>
      </el-form-item>
      <div v-for="(item,index) in chartData"
           :key="index"
           class="color_settings_item">
        <div class="color_settings_item_label">{{$t('custom.component.gadget.gauge.Thresholds')+'('+(index+1)+')'}}</div>
        <div class="color_settings_item_box">
          <el-select v-model="item.operator"
                     @change="changeOperator"
                     class="color_settings_item_box_operator">
            <el-option v-for="item in operatorArr"
                       :key="item"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
          <el-input :value="item.value"
                    @input="(e)=>changeValue(e,index)"
                    class="color_settings_item_box_value"></el-input>
          <el-color-picker size="small"
                           class="color_settings_item_box_color"
                           v-model="item.color"
                           @change="changeColor"
                           :predefine="predefineColors"
                           color-format="hex"></el-color-picker>
          <i class="el-icon-delete color_settings_item_box_delete"
             @click="deleteConfigure(index)"></i>
        </div>
      </div>
      <div class="color_settings_add"
           @click="addConfigure">
        <el-button type="primary"
                   icon="el-icon-circle-plus"
                   circle
                   plain
                   class="color_settings_add_btn"></el-button>
        <div class="color_settings_add_label">
          Add
        </div>
      </div>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'ChartPieSetting',
  data () {
    return {
      setting: {
        valueFieldsName: '',
        suffix: '',
        minimum: '',
        maximum: '',
        Thresholds: '',
        xAxisFontSize: ''
      },
      operatorArr: ['>','>=','=','<','<='],
      chartData: [
        {
          operator: '>',
          value: '',
          color: '#5c7bd9'
        }
      ],
      predefineColors: [
        '#5c7bd9',
        '#9fe080',
        '#ffec92',
        '#ff7070',
        '#7ed3f4',
        '#40b27d',
        '#ff915a',
        '#a969c6',
        '#fe87df'
      ]
    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
   
    'setting.Thresholds' (val) {
      if (val) {
        this.chartData = JSON.parse(this.setting.Thresholds)
      }
    }
  },
  computed: {

  },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
  },
  methods: {
    changeColor () {
      this.setting.Thresholds = JSON.stringify(this.chartData)
    },
    changeOperator () {
      this.setting.Thresholds = JSON.stringify(this.chartData)
    },
    changeValue (v, i) {
      this.chartData[i].value = v
      this.chartData = [...this.chartData]
      this.setting.Thresholds = JSON.stringify(this.chartData)
    },
    deleteConfigure (i) {
      if (this.chartData.length === 1) return
      this.chartData.splice(i, 1)
      this.setting.Thresholds = JSON.stringify(this.chartData)
    },
    addConfigure () {
      this.chartData.push({
        operator: '>',
        value: '',
        color: this.predefineColors[(this.chartData.length) % this.predefineColors.length]
      })
      this.setting.Thresholds = JSON.stringify(this.chartData)
    },
    getData () {
      return this.setting
    },
    updateSetting (value, list, layerStatus) {
      this._.merge(this.setting, value.gadgetSetting)
      if (!this.setting.manyMeasure) {
        if (this.setting.valueFieldsNameManyY && this.setting.valueFieldsNameManyY.length > 0) {
          this.setting.manyMeasure = true
        } else {
          this.setting.manyMeasure = false
        }
      }
      this.$emit('update:data', this.setting)
    }

  }
}
</script>

<style lang="scss">
.color_settings_item {
  width: 100%;
  margin-top: 10px;
  &_box {
    display: flex;
    align-items: center;
    &_operator {
      width: 80px;
      margin-right: 5px;
      .el-input__inner {
        text-align: center;
        font-weight: bold;
      }
    }
    &_value {
      flex: 1;
    }
    &_color {
      margin-left: 10px;
    }
    &_delete {
      margin-left: 5px;
      font-size: 24px;
    }
  }
}
.color_settings_add {
  margin-top: 10px;
  display: flex;
  align-items: center;
  &_btn {
    font-size: 30px;
    padding: 0 !important;
    border: none;
    margin-right: 10px;
  }
}
</style>
